<template>
    <div class="tour-order">
        <div class="title">
            <p class="tit">{{detail.title}}</p>
            <p class="money clearfix">
                <span>￥</span>
                <span>{{detail.price}}</span>
                <span>起</span>
                <!-- <span class="fr">购买须知</span> -->
            </p>
            <p class="week">
                <span>{{order.startDate}}</span>
                <!-- <span>条件退</span> -->
            </p>
            <p class="time">8:00</p>
            <!-- <p class="rule">已过最晚退票时间，不可退票</p> -->
        </div>
        <div class="infor">
            <ul>
                <li class="clearfix">
                    <p class="fl">联系人</p>
                </li>
                <li class="clearfix">
                    <p class="fl">联系人姓名：</p>
                    <input type="text" placeholder="请输入姓名" v-model="order.contractPerson" maxlength="8">
                </li>
                <li class="clearfix">
                    <p class="fl">联系人手机号：</p>
                    <input type="text" placeholder="请输入手机号码" v-model="order.phoneNum" maxlength="11">
                </li>
            </ul>
        </div>
        <div class="line"></div>
        <div class="frinfor">
            <div class="titl">亲友信息</div>
            <div class="name clearfix">
                <!-- <p>刘某人</p> -->
                <p @click="direct('addFriends')">添加亲友</p>
                <!-- <span>{{order.totalPrice}}</span>        -->
            </div>
            <div class="lists">
                <ul>
                    <li class="clearfix" v-for="(item,$index) in relList">
                        <div class="lef fl">
                            <p class="ipts"><input name="checkbox" type="checkbox" :value="item.id" v-model="checked" @click="currClick(item,$index)"></p>
                            <p v-if="item.touristType=='adult'">(成人)</p>
                            <p v-if="item.touristType=='child'">(儿童)</p>
                        </div>
                        <div class="lef fl">
                            <p>{{item.touristName}}</p>
                            <p>{{item.phoneNum}}</p>
                        </div>
                        <div class="righ fr">
                            <span @click="detelNow(item.id)">删除</span>
                            <span @click="gotoModrDtl(item.id)">编辑</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="line"></div>
        <div class="banance clearfix">
            <p class="fl">余额</p>
            <p class="fr">{{balance}} 元</p>
        </div>
        <div class="line"></div>
        <div class="btnsq clearfix">
            <p class="leftst fl">
                <span>合计：</span>
                <span>￥</span>
                <span>{{totalMoney}}</span>
            </p>
            <p class="fl currt" @click="upaidNow()">立即订购</p>
        </div>
        <div class="read clearfix">
            <input class="fl" name="checkbox" type="checkbox" value="checkbox" checked="checked">
            <p class="fl">
                <span>我已阅读并同意</span>
                <span>《蓄康荟安全手册及协议》</span>
            </p>
        </div>
        <div class="orders" v-if="isDshow=='false'">
            <div class="tit clearfix">
                <span class="fl" @click="isDshow='true'">取消</span>
                <span class="fr">确认</span>
                <span class="">选择亲友</span>
            </div>
            <div class="add">+新建亲友信息</div>
            <div class="litst">
                <ul>
                    <li class="clearfix" v-for="item in relList">
                        <div class="ipts fl">
                            <input name="checkbox" type="checkbox">
                        </div>
                        <p class="name fl">{{item.touristName}}</p>
                        <p class="phone fl">{{item.phoneNum}}</p>
                        <p class="edit fr">编辑</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 支付密码 -->
        <div class="openups " v-if="isBshow=='false'">
            <div class="tanceng">
                <div class="hide" @click="isBshow='true'">
                    <img src="../../assets/imgs/order/back.png" alt="" width="100%" height="100%" />
                </div>
                <div class="shuom">
                    <span>请输入支付密码</span>
                </div>
                <div class="word">
                    <p class="top">
                        <input type="password" v-model="postPass.payPassword" placeholder="请输入支付密码">
                    </p>
                    <p class="wang" @click="direct('forgetPass')">忘记密码?</p>
                    <p class="rule">
                        <span @click="getPassword">确认</span>
                    </p>
                </div>
            </div>
            <!-- <div class="sss"></div> -->
        </div>
        <!-- 支付密码 -->
        <!-- 提示弹层 -->
        <div class="openup " v-if="isAshow=='false'">
            <div class="tanceng">
                <div class="hide" @click="isAshow='true'">
                    <img src="../../assets/imgs/order/erro.png" alt="" width="100%" height="100%" />
                </div>
                <div class="word">
                    <p class="top"><input type="checkbox" id="risk-use">将登陆密码作为支付密码 </p>
                    <p class="rule">
                        <span @click="direct('setPassword')">设置</span>
                        <span @click="getPaymentset">确认</span>
                    </p>
                </div>
            </div>
            <div class="sss"></div>
        </div>
        <!-- 提示弹层 -->

    </div>

</template>

<script>
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import https from "@/assets/js/axiosh"
import axios from 'axios'
import Qs from 'qs'
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
import { maskTips, maskCallback } from '@/assets/js/dom'
export default {
    data() {
        return {
            isAshow: 'true',
            isBshow: 'true',
            isCshow: false,
            isDshow: false,
            userInfon: '',
            userToken: '',
            checked: [],  //选中
            childNub: [],  //选中儿童数量
            totalPrice: [], //总价
            proId: {
                tourId: ''
            },
            postPass: {   //支付密码
                payPassword: ''
            },
            postSet: {
                isSet: 'true'
            },
            detail: '',
            relList: [],
            price: '',
            childpPrice: '',
            money: '0',
            balance: '',
            upInfor: {
                orderId: '',
                totalPrice: ''
            },
            order: {
                columnId: 0, //栏目ID
                contractPerson: "", //联系人
                numChildren: '', //出行儿童人数
                numOfRelatives: '', //出行总人数
                // orderSn: "", //订单编号
                orderStatus: "unPaid", //订单状态
                // orderTime: "", //下单时间
                // payTime: "", //支付时间
                phoneNum: "",  //联系人电话
                startDate: "", //出发时间
                totalPrice: '', //订单总价
                tourId: '',  //旅游产品id
                tourTitle: "",//旅游标题
                touristIds: [],  //同行旅客ID列表
            },
            count: '1',
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        let price = sessionStorage.getItem("price") || ''
        this.price = price
        let childPrice = sessionStorage.getItem("childPrice") || ''
        this.childPrice = childPrice
        let time = sessionStorage.getItem("speData") || ''
        this.order.startDate = time
        let poctId = this.$route.query.id;
        this.proId.tourId = poctId
        this.order.tourId = poctId
        if (!this.userToken) {
            this.$router.push('/login')
        }
        this.friendsNow()
        this.inforNow()
        this.userInforNow()
        this.getReason()
        this.getPayment();
    },
    computed: {
        totalMoney: function (item, index) {
            let sum = 0;
            for (let i = 0; i < this.totalPrice.length; i++) {
                sum += this.totalPrice[i];
            };
            // console.log(this.totalPrice.length);
            this.order.numOfRelatives = this.totalPrice.length
            this.order.numChildren = this.childNub.length
            this.order.totalPrice = sum
            return sum;
        },
        checkAll: {
            get: function () {
                return this.checkedCount == this.lists.length;
            },
            set: function (value) {
                var _this = this;
                if (value) {
                    this.totalPrice = [];
                    this.checked = this.lists.map(function (item) {
                        item.checked = true;
                        let total = item.price * '1';
                        // console.log(total);
                        _this.totalPrice.push(total);
                        return item.id
                    })
                } else {
                    this.checked = [];
                    this.totalPrice = [];
                    this.relList.forEach(function (item, index) {
                        item.checked = false;
                    });
                }
            }
        },
        checkedCount: {
            get: function () {
                return this.checked.length;
            }
        }
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 是否存在支付密码
        getPayment: async function () {
            const res = await http.post('xshk/f/exist/pay/password?token=' + this.userToken)
            // console.log(res);
            this.userInfon = res.data
        },
        // 是否将登陆密码设置为支付密码
        getPaymentset: async function () {
            if ($('#risk-use').is(":checked")) {
                const res = await http.post('xshk/f/set/pay/password?token=' + this.userToken, this.postSet)
                // console.log(res);
                if (res.data.code == 0) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    this.toSubmitTour()
                    this.isBshow = 'false'
                    this.isAshow = 'true'
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请选择是否将登陆密码作为支付密码' })
            }
        },
        // 效验支付密码
        getPassword: async function () {
            this.isBshow = 'true'
            var that = this
            var userToken = localStorage.getItem('token')
            // console.log(this.postPass);
            if (this.postPass.payPassword) {
                const res = await http.post('xshk/f/check/pay/password?token=' + this.userToken, this.postPass)
                // console.log(res);
                if (res.data.code == 0) {
                    // maskTips({ id: 'noss-risksk' + new Date().getTime(), txt: res.data.message })
                    // console.log(555);
                    var self = this
                    const res = await httpr.post('tour_order/order_pay?token=' + self.userToken, self.upInfor)
                    // console.log(res);
                    if (res.data.code == 100) {
                        Toast({ message: res.data.message, duration: 1000 })
                        sessionStorage.removeItem('speData')
                        this.$router.push('tourList')
                    } else {
                        Toast({ message: res.data.message, duration: 1000 })
                    }

                } else {
                    maskTips({ id: 'noss-risk' + new Date().getTime(), txt: res.data.message })
                }
            } else {
                maskTips({ id: "phoneh-fail" + new Date().getTime(), txt: "请输入密码后，再提交！" });
            }
        },
        toSubmitTour() {
            // this.hidemaskFlag = true
            var that = this
            if (that.userInfon.code == 0) {
                if (that.userInfon.data == 'notExist') {
                    this.isAshow = 'false'
                    // maskTips({ id: 'no-address' + new Date().getTime(), txt: that.userInfon.message })
                } else {
                    this.isBshow = 'false'
                }
            } else {
                maskTips({ id: 'no-address' + new Date().getTime(), txt: that.userInfon.message })
            }
        },
        //计算订单价格
        currClick: function (item, index) {
            var _this = this;
            if (typeof item.checked == 'undefined') {
                this.$set(item, 'checked', true);
                if (item.touristType == 'adult') {
                    let total = item.price * '1';
                    this.totalPrice.push(total);
                    this.order.touristIds.push(item.id);
                } else {
                    let total = item.childPrice * '1';
                    this.totalPrice.push(total);
                    this.childNub.push(total);
                    this.order.touristIds.push(item.id);
                }
                // console.log(item.childpPrice);
            } else {
                item.checked = !item.checked;
                if (item.checked) {
                    this.totalPrice = [];
                    this.childNub = [];
                    this.order.touristIds = [];
                    this.relList.forEach(function (item, index) {
                        if (item.checked) {
                            if (item.touristType == 'adult') {
                                let total = item.price * '1';
                                _this.totalPrice.push(total);
                                _this.order.touristIds.push(item.id);
                            } else {
                                let total = item.childPrice * '1';
                                _this.totalPrice.push(total);
                                _this.childNub.push(total);
                                _this.order.touristIds.push(item.id);
                            }
                        }
                    });
                } else {
                    this.totalPrice = [];
                    this.childNub = [];
                    this.order.touristIds = [];
                    this.relList.forEach(function (item, index) {
                        if (item.checked) {
                            if (item.touristType == 'adult') {
                                let total = item.price * '1';
                                _this.totalPrice.push(total);
                                _this.order.touristIds.push(item.id);
                            } else {
                                let total = item.childPrice * '1';
                                _this.totalPrice.push(total);
                                _this.childNub.push(total);
                                _this.order.touristIds.push(item.id);
                            }

                        }
                    });
                }
            }
        },
        // 删除亲友
        detelNow: async function (ids) {
            let that = this
            let infor = {
                userTouristId: ''
            }
            infor.userTouristId = ids
            const res = await httpr.post('user_tourist/del?token=' + this.userToken, infor)
            // console.log(res);
            if (res.data.code == 100) {
                this.friendsNow()
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        //亲友信息
        friendsNow: async function () {
            const res = await httpr.post('user_tourist/my_list?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 100) {
                let that = this
                this.relList = res.data.data.list
                for (let i = 0; i < this.relList.length; i++) {
                    that.relList[i].price = that.price
                    that.relList[i].childPrice = that.childPrice
                };
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        //蓄康荟余额信息
        userInforNow: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 0) {
                this.balance = res.data.data.accountBalance
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        // 用户信息
        getReason: async function () {
            const res = await https.post('f/agent/home/preInfo?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 100) {
                this.order.contractPerson = res.data.data.userName || '';
                this.order.phoneNum = res.data.data.mobile || '';
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        //产品信息
        inforNow: async function () {
            const res = await httpr.post('tour_search/detail', this.proId)
            // console.log(res);
            if (res.data.code == 100) {
                // Toast({ message: res.data.message, duration: 1000 })
                this.detail = res.data.data
                this.order.tourTitle = res.data.data.title
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        //下单
        upaidNow: async function () {
            let that = this
            // console.log(this.order);
            if (this.order.totalPrice != 0) {
                if (this.order.contractPerson) {
                    if (this.order.phoneNum) {
                        const res = await httpr.post('tour_order/save_unpaid?token=' + this.userToken, this.order)
                        // console.log(res);
                        if (res.data.code == 100) {
                            that.upInfor.orderId = res.data.data.id
                            that.upInfor.totalPrice = res.data.data.totalPrice
                            // Toast({ message: res.data.message, duration: 1000 })
                            if (this.order.totalPrice <= this.balance) {
                                that.toSubmitTour()
                            } else {
                                setTimeout(function () {
                                    Toast({ message: '余额不足,请充值后支付订单', duration: 1000 })
                                    that.$router.push('rechargeFace')
                                }, 1000)
                            }
                        } else {
                            Toast({ message: res.data.message, duration: 1000 })
                        }
                    } else {
                        Toast({ message: '请输入联系人电话', duration: 1000 })
                    }
                } else {
                    Toast({ message: '请输入联系人姓名', duration: 1000 })
                }
            } else {
                Toast({ message: '请选择出行亲友后提交订单', duration: 1000 })
            }

        },
        gotoModrDtl: function (pid) {
            this.$router.push({ path: '/modFriends', query: { 'id': pid } })
        }
    }
}
</script>

<style lang="stylus" scoped>
.tour-order {
    .line {
        width: 100%;
        height: 12px;
        background: rgba(240, 240, 240, 1);
    }

    .title {
        background-color: #f0f0f0;
        padding: 10px;

        .tit {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        p.money {
            margin-top: 15px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(255, 126, 0, 1);

            span:nth-child(2) {
                font-size: 16px;
            }

            span:nth-child(3) {
                color: #333;
            }
        }

        p.week {
            margin-top: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        p.time {
            margin-top: 5px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        p.rule {
            margin-top: 5px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }
    }

    .infor {
        margin: 0 12px;

        ul {
            li {
                width: 100%;
                height: 45px;
                line-height: 45px;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                border-bottom: 1px solid rgba(240, 240, 240, 1);

                p {
                    width: 100px;
                }

                input {
                    width: 230px;
                    height: 30px;
                    // background-color: #999;
                    font-size: 16px;
                }
            }
        }
    }

    .frinfor {
        padding: 12px;

        .titl {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .name {
            margin-top: 15px;

            p {
                margin-right: 20px;
                float: left;
                width: 90px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: 1px solid #999;
                border-radius: 5px;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }
        }

        .lists {
            margin-top: 20px;

            ul {
                li {
                    padding-top: 10px;
                    width: 100%;
                    height: 70px;
                    line-height: 25px;
                    border-bottom: 1px solid #999;

                    div.lef {
                        margin-right: 20px;
                        text-align: center;
                        font-size: 14px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(153, 153, 153, 1);

                        // position: relative;
                        .ipts {
                            input {
                                height: 15px;
                                width: 18px;
                            }
                        }
                    }

                    div.righ {
                        padding-top: 10px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);

                        span {
                            display: inline-block;
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                            background: rgba(143, 195, 31, 1);
                            border-radius: 5px;
                        }
                    }
                }
            }
        }
    }

    .banance {
        padding: 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .btnsq {
        z-index: 55;
        position: fixed;
        bottom: 0px;
        font-size: 16px;
        text-align: center;
        width: 100%;
        border-top: 1px solid #999;

        p {
            width: 50%;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            background: #fff;
        }

        p.leftst {
            padding-left: 20px;
            text-align: left;
        }

        .currt {
            color: #fff;
            background: #8FC31F;
        }
    }

    .read {
        padding: 10px;
        margin-bottom: 100px;
        position: relative;

        input {
            position: absolute;
            top: 32px;
            left: 20px;
        }

        p {
            position: absolute;
            top: 0px;
            left: 40px;

            span:nth-child(1) {
                font-size: 14px;
                color: #999;
            }

            span:nth-child(2) {
                font-size: 14px;
                color: #006CD1;
            }
        }
    }

    .orders {
        padding: 12px;
        width: 100%;
        z-index: 95;
        position: fixed;
        bottom: 0px;
        height: 450px;
        background-color: #fff;

        .tit {
            border-bottom: 1px solid #eee;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            text-align: center;
            padding: 10px;

            span:nth-child(3) {
                color: rgba(51, 51, 51, 1);
            }
        }

        .add {
            margin-top: 20px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            border: 1px solid #999;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            border-radius: 5px;
        }

        .litst {
            margin-top: 20px;

            ul {
                li {
                    font-size: 16px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                    height: 50px;
                    line-height: 50px;
                    position: relative;
                    overflow: hidden;

                    .ipts {
                        position: absolute;
                        top: 5px;
                        left: 10px;

                        input {
                            height: 20px;
                            width: 20px;
                        }
                    }

                    .name {
                        margin-left: 40px;
                        width: 90px;
                        overflow: hidden;
                    }

                    .phone {
                        margin-left: 20px;
                        width: 120px;
                    }

                    .edit {
                        margin-top: 12px;
                        width: 60px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        background: rgba(143, 195, 31, 1);
                        border-radius: 5px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }
                }
            }
        }
    }

    /* Popup */
    .openup {
        max-width: 750px;

        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            max-width: 750px;
            position: fixed;
            z-index: 50;
            top: 150px;
            background-image: url('../../assets/imgs/order/bgc.png');
            background-size: 100% 100%;
            width: 100%;
            height: 300px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 30px;
                position: fixed;
                top: 150px;
                right: 70px;
                z-index: 99;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 200px;
                    color: #fff;
                    font-size: 15px;
                }

                p.rule {
                    font-size: 20px;
                    margin-top: 40px;
                    color: #fff;

                    span {
                        padding: 10px 45px;
                    }

                    span:nth-child(2) {
                        color: #C2DF5A;
                    }
                }
            }
        }
    }

    /* Popup */
    .openups {
        max-width: 750px;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #efefef;
        z-index: 666;

        // display: none;
        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            position: relative;
            max-width: 750px;
            width: 100%;
            height: 250px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 20px;
                position: absolute;
                top: -5px;
                left: 30px;
                z-index: 99;
            }

            div.shuom {
                color: #333;
                padding-top: 15px;
                font-size: 20px;
                text-align: center;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 10px;
                    color: #000;

                    input {
                        font-size: 20px;
                        text-align: center;
                        border-bottom: 1px solid #333;
                        background-color: #efefef;
                    }
                }

                p.wang {
                    text-align: right;
                    padding-top: 10px;
                    padding-right: 70px;
                    font-size: 6px;
                    color: #9CC900;
                }

                p.rule {
                    margin-top: 15px;
                    color: #000;

                    span {
                        font-size: 20px;
                        padding: 10px 100px;
                        border-radius: 20px;
                        color: #fff;
                        height: 50px;
                        width: 800px;
                        background-color: #C2DF5A;
                    }
                }
            }
        }
    }
}
</style>
